<?php
/**
 * Created by PhpStorm.
 * User: Sky
 * Date: 16/1/22
 * Time: 下午5:32
 */

use yii\helpers\Html;
use yii\helpers\Url;
use app\lib\WeixinUtils;

$web = Url::to("@web");

?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>产品列表</title>
    <link type="text/css" href="<?= $web ?>/css/bag/goods-list.css" rel="stylesheet"/>
    <link type="text/css" href="<?= $web ?>/css/bag/global.css" rel="stylesheet"/>

    <script type="text/javascript" src="<?= $web ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?= $web ?>/js/tools.js"></script>
    <script type="application/javascript">
        $(document).ready(function () {
            var w = $(document).width();
            if (w > 640) {
                w = 640;
            }
            $("body").css("font-size", w * 20 / 320);

            var h = $(window).height();
            h -= $(".header-frame").height();
            h -= parseInt($(".header-frame").css("margin-top"));
            h -= parseInt($(".header-frame").css("margin-bottom"));
            h -= 4;
            h -= $(".filter-frame").height();
            $("#list_frame").height(h);

            $("#btn_sort").click(function () {
                $("#scene_content").hide();
                $("#sort_content").toggle();
            });

            $("#btn_scene").click(function () {
                return;
                $("#sort_content").hide();
                $("#scene_content").toggle();
            });


            $(document).click(function () {
//                $("#sort_content").hide();
//                $("#scene_content").hide();
//                addShoppingCart();
            });

            goods_tpl = returnstring("<?=$web?>/js/bag/goods-list-goods.tpl");
            loadGoodsList(false);

            $("#list_frame").scroll(function () {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(this).height();
                var contentHeight = $(".list-frame").height();
                if (scrollTop + scrollHeight >= contentHeight) {
//                    alert(1);
                    loadGoodsList(false);
                }
            });
        });

        function addShoppingCart(goods_code) {
            addCart(goods_code);
            event.stopPropagation();
            $("#shopping_cart_num").find("label").addClass("label-animation");
            setTimeout(clearAnimation, 1000);

        }

        function clearAnimation() {
            $("#shopping_cart_num").find("label").removeClass("label-animation");
        }


        var start = 0;
        var pagesize = 8;
        var goods_tpl = "";
        function href_goods_detail(goods_code) {
            goods_code = encodeURI(goods_code);
            window.location.href = "<?=Url::to(["wx-bag/goods-detail"]);?>?goods_code=" + goods_code;
        }
        function loadGoodsList(isClear) {
            if (isClear) {
                start = 0;
            }
            var data = {};
            data.start = start;
            data.pagesize = pagesize;
            data.category = 0;
            data.order = order;
            data.filter = 0;
            var re = returnjson("<?=Url::to(['wx-bag/get-goods-list-handle'])?>", data);
            if (re.flag == 0) {
                alert(re.msg);
                return;
            } else {
                var target = $(".list-frame");
                if (isClear) {
                    target.empty();
                }

                $.each(re.goodsList, function (i, item) {
                    var dom = document.createElement("LI");
                    dom.innerHTML = goods_tpl._format({
                        name: item.GOODS_NAME,
                        pic: item.GOODS_IMG_URL || '<?=$web?>/logo.jpg',
                        price: item.PRICE,
                        code: item.GOODS_CODE,
                        web: '<?=$web?>'
                    });
                    target.get(0).appendChild(dom);
                });
                start = start + re.goodsList.length;
            }

        }
        function hide_menu(){
            $("#scene_content").hide();
            $("#sort_content").hide();
        }
        var order = 0;
        function switchOrder() {
            hide_menu();
            if (order == 0 || order == 2) {
                order = 1;
                $("#v_order_lable").html("价格↑");
            } else {
                order = 2;
                $("#v_order_lable").html("价格↓");
            }
            loadGoodsList(true);
        }
        function defaultOrder() {
            hide_menu();

            order = 0;
            $("#v_order_lable").html("默认");
            loadGoodsList(true);

        }

        function addCart(goods_code){
            var data={};
            data.goods_code=goods_code;
            var re=returnjson('<?=Url::to(['wx-bag/add-goods-to-cart-handle'])?>',data);
            if (re.flag == 0) {
                alert(re.msg);
                return;
            } else {
                $('#v_TOTALNUM').html("+"+re.TOTALNUM);
               // alert('加入购物车成功');
            }
        }
        function href_cart(){
            window.location.href = "<?=Url::to(["wx-bag/shopping-cart"]);?>";
        }

        function href_goods_query(){
            window.location.href = "<?=Url::to(["wx-bag/goods-query"]);?>";
        }
        function href_goods_category(){
            window.location.href = "<?=Url::to(["wx-bag/goods-category"]);?>";
        }
    </script>
</head>
<body>
<div class="main">
    <div class="header-frame">
        <div class="query" onclick="href_goods_query()">
            <img src="<?= $web ?>/img/bag/goods-list/icon-query.png">
            <div><label>搜索全部商品</label></div>
        </div>
        <div id="shopping_cart_num" class="shopping-cart" onclick="href_cart()"
             style="background-image: url('<?= $web ?>/img/bag/goods-list/icon-shopping-cart.png')">
            <div><label id="v_TOTALNUM">+<?=$TOTALNUM?></label></div>
        </div>
    </div>
    <div class="filter-frame">
        <div class="filter-item" style="border-right: 1px #d7d6d6 solid;">
            <div id="btn_sort">
                <div class="txt" style="margin-left: 1.3em;" ><label id="v_order_lable">默认</label></div>
                <div><img src="<?= $web ?>/img/bag/goods-list/icon-none.png"></div>
                <div><img src="<?= $web ?>/img/bag/goods-list/icon-down.png"></div>
            </div>
            <ul id="sort_content" style="display: none; position: relative; z-index: 100;">
                <li style="margin-top: 0.175em;background-color: #ffffff; border-top: 1px #d7d6d6 solid; border-right: 1px #d7d6d6 solid;" onclick="switchOrder()">
                    <div class="txt" style="margin-left: 1.3em;"><label>价格</label></div>
                    <div><img src="<?= $web ?>/img/bag/goods-list/icon-sort.png"></div>
                </li>
                <li style="background-color: #ffffff; border-top: 1px #d7d6d6 solid; border-right: 1px #d7d6d6 solid; border-bottom: 1px #d7d6d6 solid;">
                    <div class="txt" style="margin-left: 1.3em;" onclick="defaultOrder()"><label>默认</label></div>
                    <div></div>
                </li>

            </ul>
        </div>
        <div class="filter-item" style="border-right: 1px #d7d6d6 solid;">
            <div id="btn_scene">
                <div class="txt" style="margin-left: 0.8em;"><label>全部送礼对象</label></div>
                <div  style="display: none;"><img src="<?= $web ?>/img/bag/goods-list/icon-down.png"></div>
            </div>
            <ul id="scene_content" style="display: none; position: relative; z-index: 100;">
                <li style="margin-top: 0.175em;background-color: #ffffff; border-top: 1px #d7d6d6 solid; border-right: 1px #d7d6d6 solid;border-left: 1px #d7d6d6 solid;">
                    <div class="txt" style="margin-left: 1.3em;"><label>送老人</label></div>
                </li>
                <li style="background-color: #ffffff; border: 1px #d7d6d6 solid;">
                    <div class="txt" style="margin-left: 1.3em;"><label>送xx</label></div>
                </li>
            </ul>
        </div>
        <div class="filter-item">
            <div class="txt" style="margin-left: 1.5em;" onclick="href_goods_category();"><label>礼物分类</label></div>
        </div>
    </div>
    <div id="list_frame" style="overflow: auto;">
        <ul class="list-frame">
            <!--            <li>-->
            <!--                <div class="item-frame">-->
            <!--                    <img class="goods-img" src="-->
            <? //= $web ?><!--/img/bag/goods-list/icon-shopping-cart.png">-->
            <!--                    <div class="goods-name"><label>雅图银兴梦银兴梦空间国际影院电影票雅图银兴梦银兴梦空间国际影院电影票</label></div>-->
            <!--                    <div class="goods-price"><label class="price-symbol">¥</label><label class="price">199</label></div>-->
            <!--                    <img class="btn-add-shopping-cart" src="-->
            <? //= $web ?><!--/img/bag/goods-list/btn-add-shopping-cart.png">-->
            <!--                </div>-->
            <!--            </li>-->
        </ul>
        <div class="load-more"><label>正在加载....</label></div>
    </div>
</div>
</body>
</html>
